﻿@page "/Input-Mask/Default-Functionalities"

@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of MaskedTextBox component. Enter numeric value for “Mobile Number” textbox then press tab key and then enter “Country ISO Code” in alphabetic format, then type “D.O.B” in numeric format. Finally enter the “Product Key” in alpha numeric format.</p>
</SampleDescription>
<ActionDescription>
   <p> The <b>MaskedTextBox</b> is a textbox extended component that allows the user to enter only the valid input based on the provided mask. It is used to get the input with specific formats like Phone number, Date, Time, IP, Social security number, etc.</p>
   <p>MaskedTextBox supports the list of mask elements based on the standard MSDN mask elements.</p>
   <p>More information about the MaskedTextBox can be found in this<a target='_blank' href='https://blazor.syncfusion.com/documentation/input-mask/getting-started/'>  documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="control-label">
                Mobile Number
            </div>
            <SfMaskedTextBox Mask="000-000-0000"></SfMaskedTextBox>
            <div class="control-label">
                Country ISO Code
            </div>
            <SfMaskedTextBox Mask=">LL / LLL"></SfMaskedTextBox>
            <div class="control-label">
                D.O.B
            </div>
            <SfMaskedTextBox Mask="00/00/0000"></SfMaskedTextBox>
            <div class="control-label">
                Product Key
            </div>
            <SfMaskedTextBox Mask=">AAAAA-AAAAA-AAAAA-AAAAA"></SfMaskedTextBox>
        </div>
    </div>
</div>

<style>
    .content-wrapper {
        width: 30%;
        margin: 0 auto;
        min-width: 185px;
    }

    .control-label {
        padding: 24px 0px 10px 0px;
        font-size: 12px;
    }
</style>
